<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>编辑个人信息</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<link rel="stylesheet" href="css/doctor.css" />
		<style type="text/css">
			.van-button--info {
				background-color: #e22e30;
				border-color: #e22e30;
				font-size: 18px;
			}
			.van-field__label {
				color: var(--van-cell-text-color);
			}
			.width20 .van-field__label {
				width: 20%;
			}
			.di_top_right .van-field__control {
				text-align: right;
			}
			.van-field__control {
				color: var(--van-cell-value-color);
			}
			.doctor_box_1_100 {
				width: calc(100% - 0.4rem);
				margin: 0;
				padding: 3% 0.2rem;
				font-size: 16px;
			}
			.doctor_box_1_100 > .van-cell-group > .van-cell {
				padding-right: 0;
			}
			.van-field__label--required::before {
				position: absolute;
				left: var(--van-padding-xs);
				color: var(--van-cell-required-color);
				font-size: var(--van-cell-font-size);
				content: '*';
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="id_container">
				<div class="doctor_left_title" style="margin-top: 0">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">基本信息</span>
				</div>
				<div class="doctor_box_100 doctor_box">
					<div class="di_top_left">
						<van-uploader v-if="detail.doctorsImg" :after-read="afterRead">
							<img :src="detail.doctorsImg" />
						</van-uploader>
					</div>
					<div class="di_top_right">
						<van-cell-group :border="false">
							<van-field
								class="width20"
								v-model="detail.doctorsName"
								:required="true"
								label="姓名"
								placeholder="请输入您的姓名"
							></van-field>
							<van-cell @click="showPopupSex" title="性别" :required="true"
								>{{columnsValueSex || '请选择性别'}}</van-cell
							>
							<van-cell
								title="出生日期"
								:value="detail.doctorsBirthday"
								@click="showCalendarpop"
							></van-cell>
						</van-cell-group>
						<van-popup
							v-model:show="showSex"
							position="bottom"
							:style="{ height: '45%' }"
						>
							<van-picker
								show-toolbar
								title="性别"
								:columns="columnsSex"
								:default-index="0"
								@cancel="showSex = false"
								@confirm="onConfirmSex"
							/>
						</van-popup>
						<van-popup
							v-model:show="showCalendar"
							position="bottom"
							:style="{ height: '45%' }"
						>
							<van-datetime-picker
								v-model="date"
								type="date"
								:min-date="minDate"
								:max-date="maxDate"
								@cancel="showCalendar = false"
								@change="calChange"
								@confirm="onConfirmCalendar"
							/>
						</van-popup>
					</div>
				</div>
				<div class="doctor_box_1_100 doctor_box" style="margin-top: 0.3rem">
					<van-cell-group :border="false">
						<!--<van-field v-model="detail.workingTime" label="执业经验(年)" placeholder="请输入年份" />-->
						<van-cell
							title="医院/机构"
							@click="showOrgup"
							is-link
							:required="true"
							>{{detail.doctorsHospital || '请选择医院/机构'}}</van-cell
						>
						<van-cell title="职称" @click="showLevelup" is-link :required="true"
							>{{doctorsLevel || '请选择职称'}}</van-cell
						>
						<van-cell
							title="执业经验"
							@click="showPopup"
							:required="true"
							is-link
							:value="detail.doctorsTimeWork"
						></van-cell>
						<van-cell
							title="工作所在地"
							:value="detail.doctorsCity"
							is-link
							@click="showAreaup"
						></van-cell>
					</van-cell-group>
					<van-popup
						v-model:show="showOrg"
						position="bottom"
						:style="{ height: '45%' }"
					>
						<van-picker
							show-toolbar
							title="机构"
							:columns="org"
							:default-index="0"
							@cancel="showOrg = false"
							@confirm="onConfirmOrg"
						/>
					</van-popup>
					<van-popup
						v-model:show="showLevel"
						position="bottom"
						:style="{ height: '45%' }"
					>
						<van-picker
							show-toolbar
							title="职称"
							:columns="level"
							:default-index="0"
							@cancel="showLevel = false"
							@confirm="onConfirmLevel"
						/>
					</van-popup>
					<van-popup
						v-model:show="dateshow"
						position="bottom"
						:style="{ height: '45%' }"
					>
						<van-datetime-picker
							v-model="currentDate"
							type="year-month"
							:min-date="minDate"
							:max-date="maxDate"
							:formatter="formatter"
							@cancel="dateshow = false"
							@change="onchange"
							@confirm="onConfirm"
						/>
					</van-popup>
					<van-popup v-model:show="showArea" round position="bottom">
						<van-area
							:area-list="areaList"
							:columns-num="2"
							title=""
							@confirm="onConfirmArea"
							@cancel="showArea = false"
						/>
					</van-popup>
				</div>

				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">医生经历</span>
				</div>
				<div class="doctor_box doctor_box_100">
					<van-field
						v-model="detail.doctorsWorkExperience"
						rows="2"
						autosize
						type="textarea"
						maxlength="500"
						placeholder="请填写您最擅长的治疗疾病内容，有助于患者精确地了解您！"
						show-word-limit
					/>
				</div>

				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">职业专长</span>
				</div>
				<div class="doctor_box doctor_box_100">
					<van-field
						v-model="detail.doctorsSpecialSkill"
						rows="2"
						autosize
						type="textarea"
						maxlength="500"
						placeholder="请填写您的个人简历、执业经历及获得各项荣誉等"
						show-word-limit
					/>
				</div>

				<div class="edit_doctorinfo">
					<van-button round type="info" block @click="next">下一步</van-button>
				</div>
			</div>
			<link-index></link-index>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../base.js"></script>
	<script src="../common/js/url.min.js"></script>

	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from '../common/js/api/vue3-axios-utils.js'

		import { linkIndex } from '../common/js/template/linkIndex.js'

		const PatientData = {
			data() {
				return {
					url: {
						getDetail: '/201/02/2010201',
						upLoad: '/sys/common/upload',
						getProvince: '/dict/district/info',
						save: '/201/02/2010202',
					},
					detail: {},
					doctorId: '',
					showSex: false, //弹窗
					columnsSex: ['男', '女'],
					columnsValueSex: null,
					date: new Date(),
					showCalendar: false,
					fieldValue: '',
					showArea: false,
					areaList: {
						province_list: {},
						city_list: {},
					},
					level: [],
					org: [],
					levelList: [],
					orgList: [],
					dateshow: false,
					showOrg: false,
					// doctorsHospital: '',
					doctorsLevel: '',
					showLevel: false,
					minDate: new Date(1970, 0, 1),
					maxDate: new Date(
						new Date().getFullYear(),
						new Date().getMonth(),
						new Date().getDate()
					),
				}
			},
			computed: {
				isIdentify() {
					return url('?status') ? true : false
				},
			},
			created() {
				this.doctorId = url('?id')
				this.init()
			},
			methods: {
				async init() {
					const info = JSON.parse(sessionStorage.getItem('doctorInfo'))
					if (info) {
						this.detail = info
						info.doctorsLevel && (this.doctorsLevel = info.doctorsLevel)
						if (info.doctorsSex == 1) {
							this.columnsValueSex = '男'
						} else {
							this.columnsValueSex = '女'
						}
						this.handleGetLevel()
					} else {
						await this.handleGetDetail()
					}
					await this.handleGetProvince()
				},
				handleGetLevel() {
					getAction(spliceUrl('/sys/dict/getDictItems/jobTitle')).then(res => {
						res = res.data
						console.log('handleGetLevel', res)
						if (res.success) {
							this.levelList = res.result
							this.level = res.result.map(v => {
								return v.title
							})
							this.levelList.forEach(v => {
								if (this.detail.doctorsLevel == v.value) {
									this.doctorsLevel = v.title
								}
							})
						}
					})
					getAction(spliceUrl('/sys/sysDepart/queryTreeList')).then(res => {
						res = res.data
						console.log('handleGetLevel', res)
						if (res.success) {
							this.orgList = res.result[0].children.map(v => {
								return {
									title: v.title,
									orgCode: v.orgCode,
								}
							})
							this.org = res.result[0].children.map(v => {
								return v.title
							})
							// this.orgList.forEach(v => {
							// 	if (this.detail.doctorsHospital == v.orgCode) {
							// 		this.doctorsHospital = v.title
							// 	}
							// })
						}
					})
				},
				handleGetDetail() {
					postAction(spliceUrl(this.url.getDetail), {
						doctorId: this.doctorId,
					}).then(res => {
						res = res.data
						console.log('handleGetDetail', res)
						if (res.success) {
							this.detail = res.result
							res.result.doctorsLevel &&
								(this.doctorsLevel = res.result.doctorsLevel)
							res.result.doctorsWorkPermits &&
								(this.detail.doctorsWorkPermits =
									res.result.doctorsWorkPermits.split(','))
							res.result.doctorsCertificate &&
								(this.detail.doctorsCertificate =
									res.result.doctorsCertificate.split(','))
							this.currentDate = res.result.doctorsTimeWork
							if (res.result.doctorsSex == 1) {
								this.columnsValueSex = '男'
							} else {
								this.columnsValueSex = '女'
							}
							this.handleGetLevel()
						}
					})
				},
				handleGetProvince() {
					getAction(spliceUrl(this.url.getProvince), {}).then(res => {
						res = res.data
						console.log('handleGetProvince', res)
						if (res.success) {
							let province_list = {}
							let formArr = res.result.provinceInfo
							for (var x in formArr) {
								province_list[formArr[x].districtId] = formArr[x].name
							}

							let city_list = {}
							let formArr1 = res.result.cityInfo
							for (var y in formArr1) {
								city_list[formArr1[y].districtId] = formArr1[y].name
							}
							this.areaList.province_list = province_list
							this.areaList.city_list = city_list
						}
					})
				},
				callphone() {
					window.location.href = 'tel://' + this.detail.doctorsMobile
				},
				afterRead(file) {
					// 此时可以自行将文件上传至服务器
					console.log(file)
					let formData = new FormData()
					formData.append('file', file.file)
					postAction(spliceUrl(this.url.upLoad), formData).then(res => {
						res = res.data
						console.log('upLoad', res)
						if (res.success) {
							this.detail.doctorsImg = res.message
						}
					})
				},
				showPopupSex() {
					this.showSex = true
				},
				onConfirmSex(value, index) {
					this.columnsValueSex = value
					this.showSex = false
					this.detail.doctorsSex = value == '男' ? 1 : 2
				},
				onConfirmOrg(value, index) {
					this.detail.doctorsHospitalId = this.orgList[index].orgCode
					this.detail.doctorsHospital = this.orgList[index].title
					this.detail.orgCode = this.detail.doctorsHospitalId
					// this.doctorsHospital = value
					this.showOrg = false
				},
				onConfirmLevel(value, index) {
					this.detail.doctorsLevel = this.levelList[index].value
					this.doctorsLevel = value
					this.showLevel = false
				},
				calChange(value) {
					console.log(value)
				},
				showCalendarpop() {
					this.showCalendar = true
					this.date = new Date(this.detail.doctorsBirthday)
				},
				formatDate(date) {
					return `${date.getFullYear()}-${getNow(date.getMonth() + 1)}-${getNow(
						date.getDate()
					)}`
				},
				onConfirmCalendar(date) {
					this.showCalendar = false
					this.date = this.formatDate(date)
					this.detail.doctorsBirthday = this.formatDate(date)
					console.log('date', this.date)
				},
				onConfirmArea(e) {
					this.showArea = false
					console.log('e', e)
					if (e[0].name != e[1].name) {
						this.detail.doctorsCity = e[0].name + e[1].name
					} else {
						this.detail.doctorsCity = e[0].name
					}
					this.detail.doctorsProvinceId = e[0].code
					this.detail.doctorsCityId = e[1].code
				},
				showAreaup() {
					this.showArea = true
					console.log('show', this.showArea)
				},
				formatter(type, val) {
					if (type === 'year') {
						return `${val}年`
					} else if (type === 'month') {
						return `${val}月`
					}
					return val
				},
				showPopup() {
					this.dateshow = true
					this.currentDate = new Date(this.detail.doctorsTimeWork)
				},
				showOrgup() {
					this.showOrg = true
				},
				showLevelup() {
					this.showLevel = true
				},
				onConfirm(value) {
					this.currentDate =
						value.getFullYear() + '-' + getNow(Number(value.getMonth()) + 1)
					this.detail.doctorsTimeWork =
						value.getFullYear() + '-' + getNow(Number(value.getMonth()) + 1)
					this.dateshow = false
				},
				onchange(value) {
					this.currentDate =
						value.getFullYear() + '-' + getNow(Number(value.getMonth()) + 1)
					this.detail.doctorsTimeWork =
						value.getFullYear() + '-' + getNow(Number(value.getMonth()) + 1)
				},
				check() {
					if (!this.detail.doctorsName) {
						this.$toast.fail('请输入您的名字！')
						return false
					}
					if (!this.detail.doctorsSex) {
						this.$toast.fail('请选择性别!')
						return false
					}
					if (!this.detail.doctorsHospitalId) {
						this.$toast.fail('请输入医院/机构!')
						return false
					}
					if (!this.detail.doctorsLevel) {
						this.$toast.fail('请输入医生职称!')
						return false
					}
					if (!this.detail.doctorsTimeWork) {
						this.$toast.fail('请选择执业经验!')
						return false
					}
					return true
				},
				save() {
					postAction(spliceUrl(this.url.save), this.detail).then(res => {
						res = res.data
						console.log('save', res)
						if (res.success) {
							this.$toast.success({
								message: '修改成功',
								duration: 300,
								onClose: function () {
									window.location.href =
										'./doctorInfo.html?id=' + localStorage.getItem('did')
								},
							})
						}
					})
				},
				next() {
					if (!this.check()) return
					const detail = this.detail
					console.log(this.detail)
					sessionStorage.setItem('doctorInfo', JSON.stringify(detail))
					window.location.href = `./tag.html?id=${this.doctorId}${
						this.isIdentify ? '&status=0' : ''
					}`
				},
			},
			components: {
				linkIndex: linkIndex,
			},
		}

		const app = Vue.createApp(PatientData)

		app.use(vant)

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload)

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount('#app')
	</script>
</html>
